<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            font: 18px "Microsoft YaHei UI";
            margin: 0 auto;
            background-color: #F8F8F8;
            display: block;
        }

        .f {
            padding: 3px;
        }
      .ff{
          margin: 0 auto;
          height: 30px;
          line-height: 30px;
      }
        .item_div>img:hover{
            position: relative;
            bottom:5px;
            /*元素阴影: x偏移值 y偏移值 浓度 范围 颜色*/
            box-shadow:0 0 100px 2px lawngreen ;
        }


    </style>
</head>
<body>
<div id="app" style="background-color: #E8E8E8" >
    <el-container>
        <el-header>
            <div style="width: 100%; height: 60px;background-color:#DCDDE0">
                <el-menu style="width: 1200px;margin: 0 auto;"

                         class="el-menu-demo"
                         mode="horizontal"
                         @select="handleSelect"
                         background-color="#DCDDE0"
                         text-color="#999"
                         active-text-color="#fff">
                    <el-menu-item index="2" class="f"><i class="el-icon-location-outline"></i></el-menu-item>
                    <el-menu-item index="3" class="f">美团</el-menu-item>
                    <el-menu-item index="4" class="f">天津</el-menu-item>
                    <el-menu-item index="5" class="f">切换城市</el-menu-item>
                    <el-menu-item index="6" class="f">[北京 廊坊 石家庄]</el-menu-item>
                    <el-menu-item index="7" style="padding-top: 2px ; color: red">立即登录</el-menu-item>
                    <el-menu-item index="4" class="f">注册</el-menu-item>
                    <el-menu-item index="4" style="padding-left: 400px">我的美团</el-menu-item>
                    <el-menu-item index="4">手机APP</el-menu-item>
                    <el-menu-item index="4">商家中心</el-menu-item>
                    <el-menu-item index="4">美团规则</el-menu-item>
                </el-menu>


                <div style="width: 1200px;margin: 0 auto;">

                    <div style="margin-top: 20px ;display: inline-block">
                    <img src="https://s0.meituan.net/bs/fe-web-meituan/10afbf1/img/logo.png" alt="" title="" style="position: relative;margin-left: 50px">
                    </div>
                      <input placeholder="搜索商家或地点"  style="width: 500px;height: 40px; display: inline-block;margin-left: 250px;position: absolute;  margin-top: 40px;size: 18px" >
                    <el-button style="background-color: #ffc300;border: 0;position: absolute;  margin-top: 40px;size: 18px;margin-left: 705px;height: 46px;"
                               icon="el-icon-search"
                    ></el-button>
              </div>
            </div>
</el-header>

<el-main style="width: 1200px;margin: 0 auto;">
    <div style="width: 100%; height: 310px;background-color:#DCDDE0; margin-top: 100px">
    <el-menu
            style="width: 200px; float: left"
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="vertical"
            @select="handleSelect"
            background-color="#70DB93"
            text-color="#000"
            active-text-color="#ffd04b">
        <h4>全部分类</h4>
        <el-menu-item index="2" class="ff" >美食</el-menu-item>
        <el-menu-item index="3" class="ff">外卖</el-menu-item>
        <el-menu-item index="4" class="ff">酒店</el-menu-item>
        <el-menu-item index="4" class="ff">民宿</el-menu-item>
        <el-menu-item index="4" class="ff">猫眼电影</el-menu-item>
        <el-menu-item index="4" class="ff">机票 / 火车票</el-menu-item>
        <el-menu-item index="4" class="ff">休闲娱乐 / KTV</el-menu-item>
        <el-menu-item index="4" class="ff">丽人 / 美发 / 医学美容</el-menu-item>
    </el-menu>

        <template style="display: inline-block;">
            <div class="block" style="width: 400px;position: relative;float: left;margin-left:10px">
                <span class="demonstration"></span>
                <el-carousel height="150px">
                    <el-carousel-item v-for="item in arr" :key="item">
                        <img :src="item" style="width: 100% ;hight:100%" alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>
        </template>
        <div>
            <img src="http://p1.meituan.net/codeman/8cce56c467a17e04f3094d1e455462a0132772.png" alt="" style="float: left; height:150px;margin-left:10px">
            <img src="http://p1.meituan.net/codeman/16442c19da1f1c4544f794e29d99c92051716.jpg" alt="" style="float: left;height:150px;margin-left:10px">
            <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.mtZ5mtmtd-OJq4sjFdqhsgHaD8?w=321&h=180&c=7&r=0&o=5&pid=1.7" alt="" style="float: left;height:150px;margin-left:10px;margin-top: 10px">
            <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.xSIPdKe9bcavRmy0afgTTQHaCt?w=349&h=127&c=7&r=0&o=5&pid=1.7" alt="" style="float: left;height:150px;margin-left:10px;margin-top: 10px">
           <!-- <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.v858TpPW286NX-fu0zM60gHaFj?w=245&h=184&c=7&r=0&o=5&pid=1.7" alt="" style="float: left;height:150px;margin-left:10px;margin-top: 10px">-->
            <img src="http://p1.meituan.net/codeman/5b21cddb4bb1cbc3a9c3bce0f726c75940469.jpg" alt="" style="float: left;height:150px;margin-left:10px;margin-top: 10px; width: 200px;">
        </div>
    </div>
    <h2 style="background-color:palevioletred ; border-radius: 5px;margin: 5px 0 0 5px;padding-left:500px ">猫眼电影</h2>
    <div>
        <!--商品列表开始-->
        <el-row :gutter="20">
            <el-col :span="6" v-for="i in mainArr">
                <el-card :body-style="{ padding: '0px' }">
                    <div class="item_div" style="padding: 20px 20px 0 20px">
                        <img :src="i.url" width="100%" class="image" >
                    </div>
                    <div style="padding: 14px;">
                        <p style="margin-top: 0;font-size: 15px;height: 38px" >{{i.name}}</p>
                        <div class="bottom clearfix" style="color: #6c6c6c">
                            <span >{{i.price}} <small style="text-decoration: line-through">原价¥{{i.oldPrice}}</small></span>
                            <span style="float:right">销量:{{i.count}}张</span>
                        </div>
                    </div>
                </el-card>

            </el-col>
        </el-row>
        <!--商品列表结束-->
    </div>
    <h2 style="background-color:blueviolet ; border-radius: 5px;margin: 5px 0 0 5px;padding-left:500px ">民宿住宿</h2>
    <div>
        <!--商品列表开始-->
        <el-row :gutter="20">
            <el-col :span="8" v-for="i in mainArr1">
                <el-card :body-style="{ padding: '0px' }">
                    <div class="item_div" style="padding: 20px 20px 0 20px">
                        <img :src="i.url" width="100%" class="image" >
                    </div>
                    <div style="padding: 14px;">
                        <p style="margin-top: 0;font-size: 15px;height: 38px" >{{i.name}}</p>
                        <div class="bottom clearfix" style="color: #6c6c6c">
                            <span >{{i.price}} <small style="text-decoration: line-through">原价¥{{i.oldPrice}}</small></span>
                            <span style="float:right">住宿人次:{{i.count}}</span>
                        </div>
                    </div>
                </el-card>

            </el-col>
        </el-row>
        <!--商品列表结束-->
    </div>
    <h2 style="background-color:#9F5F9F ; border-radius: 5px;margin: 5px 0 0 5px;padding-left:500px ">美食团购</h2>
    <div>
        <!--商品列表开始-->
        <el-row :gutter="20">
            <el-col :span="6" v-for="i in mainArr2">
                <el-card :body-style="{ padding: '0px' }">
                    <div class="item_div" style="padding: 10px 10px 0 10px">
                        <img :src="i.url" width="100%" class="image" >
                    </div>
                    <div style="padding: 14px;">
                        <p style="margin-top: 0;font-size: 15px;height: 20px" >{{i.name}}</p>
                        <div class="bottom clearfix" style="color: #6c6c6c">
                            <span >人均价格:{{i.price}} </span>
                            <span style="float:right">销量:{{i.count}}</span>
                        </div>
                    </div>
                </el-card>

            </el-col>
        </el-row>
        <!--商品列表结束-->
    </div>
    <div style="background-color: white; height: 300px;overflow: hidden;margin-bottom: 0">
        <h3 style="margin: 10px 0 0 10px">美团导航</h3>
        <p style="margin-left: 30px">热门城市:
        <ul style="margin-left: 60px;list-style-type: none ">
        <li style="float: left;margin-right: 50px">太原</li>
        <li style="float: left;margin-right: 50px">郑州</li>
        <li style="float: left;margin-right: 50px">福州</li>
        <li style="float: left;margin-right: 50px">南京</li>
        <li style="float: left;margin-right: 50px">沈阳</li>
        <li style="float: left;margin-right: 50px">天津</li>
        <li style="float: left;margin-right: 50px">温州</li>
    </ul>
        </p><br>
        <p style="margin-left: 30px">周边服务:
        <ul style="margin-left: 60px;list-style-type: none ">
            <li style="float: left;margin-right: 50px">天津9号温泉</li>
            <li style="float: left;margin-right: 50px">芳竹园</li>
            <li style="float: left;margin-right: 50px">天津婚纱照</li>
            <li style="float: left;margin-right: 50px">私人影院</li>
        </ul>
        </p><br>
        <p style="margin-left: 30px">热点搜索:
        <ul style="margin-left: 60px;list-style-type: none ">
            <li style="float: left;margin-right: 50px">美食</li>
            <li style="float: left;margin-right: 50px">丽人</li>
            <li style="float: left;margin-right: 50px">住宿</li>
            <li style="float: left;margin-right: 50px">观影</li>
            <li style="float: left;margin-right: 50px">学习培训</li>
            <li style="float: left;margin-right: 50px">摄影写真</li>
            <li style="float: left;margin-right: 50px">汽车服务</li>
        </ul>
        </p>

    </div>

</el-main>

<el-footer>

    <div style="background-color: #3f3f3f;padding: 10px;
            text-align: center;color: #b1b1b1;font-size: 14px;height: 120px;margin-top: -25px">
        <p>京公网安备 11000002002052号</p>
        <p>©美团网团购 meituan.com京ICP证070791号京ICP备10211739号-1</p>
        <p>互联网药品信息服务资格证 (京)-经营性-2017-0014</p>
        <p>医疗器械网络交易服务第三方平台备案：（京）网械平台备字[2018]第00004号</p>


    </div>

</el-footer>
</el-container>

</div>
</body>
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                wd: "",
                activeIndex2: '1',
                arr:["http://p0.meituan.net/codeman/a97baf515235f4c5a2b1323a741e577185048.jpg","http://p1.meituan.net/codeman/826a5ed09dab49af658c34624d75491861404.jpg","http://p0.meituan.net/codeman/33ff80dc00f832d697f3e20fc030799560495.jpg","https://p1.meituan.net/travelcube/01d2ab1efac6e2b7adcfcdf57b8cb5481085686.png"],
                mainArr:[{name:"《花束般的恋爱》",price:29.9,oldPrice:60,url:"imgs/b.jpg",count:2342},
                    {name:"《奇迹》",price:49.9,oldPrice:98,url:"imgs/e.jpg",count:666},
                    {name:"《重返地球》",price:59.9,oldPrice:99,url:"imgs/f.jpg",count:999},
                    {name:"《好想去你的世界爱你》",price:49.9,oldPrice:80,url:"imgs/c.jpg",count:888},

                   ],
                mainArr1:[
                    {name:"【巨幕电影房】长安区万达广场/东胜广场",price:233,oldPrice:598,url:" https://img.meituan.net/phoenix/53e02f6885a2b811059f2b6c36dc8f5e5562128.jpg@740w_416h_1e_1c",count:2842},
                    {name:"新百广场【枫林晚民宿】巨幕投影/高层双窗城景尽收眼底",price:233,oldPrice:598,url:"https://img.meituan.net/phoenix/1493babd23848d0419c83ea938f8a6ef6593627.jpg@740w_416h_1e_1c",count:6542},
                    {name:"【佳和】裕华区师大南郊客运站商圈单人房",price:233,oldPrice:598,url:"https://img.meituan.net/phoenix/30fed3dc4a62151f7f6765685b1af2ff2992843.jpg@740w_416h_1e_1c",count:8842},

                ],
                mainArr2:[{name:"津门羊大爷·万东路店",price:29.9,url:"//p0.meituan.net/merchant/0a3cd4541ac449ae102f142240fb0d82249251.jpg@235w_132h_1e_1c",count:42},
                    {name:"华莱士·靖江路店",price:49.9,url:"//p1.meituan.net/wmproduct/e2429c212af31872ce8cc75a25ed2ee0452254.jpg@235w_132h_1e_1c",count:66},
                    {name:"王婆大虾·槐树路店",price:59.9,url:"//p1.meituan.net/biztone/156831635_1631429024661.jpeg@235w_132h_1e_1c",count:99},
                    {name:"怪之味烤鱼·滨江道店",price:49.9,url:"//p0.meituan.net/ugcpic/a9f489a056cf36773be593df4f509412@235w_132h_1e_1c",count:88},

                ]
            }
        },
        methods: {
            handleSelect() {

            }

        }
    })
</script>
</html>